﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2>
        <DemoNavLink Link="DateEdit#AdaptiveScrollPicker" />Adaptive Datepicker
    </h2>
    <p>
        Our Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1">Date Edit</a> can adapt its data picker (date selector) to each device type.
        To specify a picker type, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.PickerDisplayMode">PickerDisplayMode</a> property. The following values are supported:
        <ul>
            <li>
                <b>Auto</b> (default) - Mobile and tablet devices display the datepicker as a scroll picker.
                Mobile devices also display a modal window for datepickers. Other device types display the datepicker as a calendar.
            </li>
            <li><b>Calendar</b> - All devices display the datepicker as a calendar.</li>
            <li><b>ScrollPicker</b> - All devices display the datepicker as a scroll picker.</li>
        </ul>
    </p>
    <p>
        When the datepicker is displayed as a scroll picker (in Auto or ScrollPicker mode), use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1.ScrollPickerFormat">ScrollPickerFormat</a> property to define the date format for each scroll picker segment (day, month, and year). Supported formats are:
        <ul>
            <li><b>ddd</b> - A day is specified by its date and the short name of the day of the week (for example, <i>15 Fri</i>).</li>
            <li><b>dddd</b> - A day is specified by its date and the full name of the day of the week (for example, <i>15 Friday</i>). </li>
            <li><b>dd</b> or <b>d</b> - A day is specified by its date (for example, <i>15</i>).</li>
            <li><b>MMM</b> - A month is specified by its short name (for example, <i>Oct</i>).</li>
            <li><b>M</b>,<b>MM</b>,or <b>MMMM</b> - A month is specified by its full name (for example, <i>October</i>).</li>
            <li><b>y</b>, <b>yy</b>, <b>yyy</b>, or <b>yyyy</b> - A year is specified by its full number (for example, <i>2019</i>).</li>
        </ul>
        The order of specified formats defines the order of corresponding scroll picker segments.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Use the datepicker to select a date" />
    </div>
    <div class="card-body mw-480">
        <DxDateEdit @bind-Date="@DateTimeValue"
                    PickerDisplayMode="DatePickerDisplayMode.ScrollPicker"
                    ScrollPickerFormat="dddd MMMM yyyy"
                    DisplayFormat="dd dddd MMMM yyyy"
                    SizeMode="SizeMode"/>
    </div>
</div>

<CodeSnippet_Editor_DateEdit_AdaptiveScrollPicker />

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}
